<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        .tagPhoto {
            position: relative;
            overflow: hidden;
        }
    </style>
</head>

<body class="bg-f5">
<div id="app">
    <div class="pageCover show"></div>
	<div class="swiper-container" id="mainImg" v-if="subjectData.special_photos && subjectData.special_photos.length">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="photo in subjectData.special_photos"><img :src="photo.url" width="100%" alt=""></div>
        </div>
    </div>
    <div class="tagPhoto" v-if="subjectData.special_type == 1">
        <img :src="subjectData.special_image" width="100%" alt="">
        <div class="postTag" :class="{'fan' : tag.data_position == 'right'}" v-for="(tag,tagIndex) in subjectData.datas" :data-ind="tagIndex" :data-id="tag.data_product_id" :style="{left: tag.data_position_left + '%',top: tag.data_position_top + '%'}" v-tap="[openDetail,tag]">
            <div class="dotBox">
                <div class="dot ani"></div>
                <div class="dot"></div>
            </div>
            <div class="tagName">{{tag.data_name}}</div>
        </div>
    </div>
    <div class="comFlowBox" v-if="subjectData.special_type > 1">
        <div class="comGodList" id="flow_html">
            <div class="grid-sizer"></div>
            <!-- 淘宝客商品 -->
            <template v-if="subjectData.special_product_type == 1">
            <div class="item" v-for="it in subjectData.datas" :data-id="it.data_product_id" v-tap="[openProduct,it]">
                <div class="inner">
                    <div class="earn" v-if="it.productData.data_amount && getUserVip()>1">赚￥{{it.productData.data_amount}}</div>
                    <div class="photo"><img :src="it.productData.pict_url" alt=""></div>
                    <div class="textBox">
                        <div class="title aui-flex-col aui-flex-middle">
                            <div class="aui-ellipsis-2"><span class="tag">{{ it.productData.user_type == 1 ? '天猫' : '淘宝' }}</span>{{ it.productData.title }}</div>
                        </div>
                        <div class="aui-flex-col aui-flex-middle priceBox">
                            <div class="nowPrice">¥{{ it.productData.coupon_amount }}</div>
                            <div class="delPrice">¥<del>{{ it.productData.zk_final_price }}</del></div>
                        </div>
                        <div class="aui-flex-col aui-flex-middle aui-flex-between">
                            <dl class="quan outline aui-flex-col aui-flex-middle" v-if="it.productData.coupon_info">
                                <dt>券</dt>
                                <dd>{{ it.productData.coupon_info }}元</dd>
                            </dl>
                            <div v-else></div>
                            <div class="sale">月销 {{ it.productData.volume }}件</div>
                        </div>
                    </div>
                </div>
            </div>
            </template>
            <!-- 大礼包和自营商品 -->
            <template v-if="subjectData.special_product_type == 2 || subjectData.special_product_type == 3">
            <div class="item" v-for="it in subjectData.datas" :data-id="it.data_product_id" v-tap="[openGoods,it]">
                <div class="inner">
                    <div class="photo"><img :src="it.productData.goods_cover" alt=""></div>
                    <div class="textBox">
                        <div class="title aui-flex-col aui-flex-middle">
                            <div class="aui-ellipsis-2">{{ it.data_name }}</div>
                        </div>
                        <div class="aui-flex-col aui-flex-middle priceBox">
                            <div class="nowPrice">¥{{ it.productData.goods_sale_price }}</div>
                            <div class="delPrice">¥<del>{{ it.productData.goods_market_price }}</del></div>
                            <div class="flex-auto"></div>
                            <div class="aui-font-size-10 color-666">月销量：{{ it.productData.goods_month_sales }}</div>
                        </div>
                    </div>
                </div>
            </div>
            </template>
            <!-- 积分商品 -->
            <template v-if="subjectData.special_product_type == 4">
            <div class="item" v-for="it in subjectData.datas" :data-id="it.data_product_id" v-tap="[openUb,it]">
                <div class="inner">
                    <div class="photo"><img :src="it.productData.goods_cover" alt=""></div>
                    <div class="textBox">
                        <div class="title aui-flex-col aui-flex-middle">
                            <div class="aui-ellipsis-2">{{ it.data_name }}</div>
                        </div>
                        <div class="aui-flex-col aui-flex-middle priceBox">
                            <div class="nowPrice">¥{{ it.productData.goods_sale_price }}</div>
                            <div class="delPrice">¥<del>{{ it.productData.goods_market_price }}</del></div>
                            <div class="flex-auto"></div>
                            <div class="aui-font-size-10 color-666">月销量：{{ it.productData.goods_month_sales }}</div>
                        </div>
                    </div>
                </div>
            </div>
            </template>
            <!-- 文章 -->
            <template v-if="subjectData.special_product_type == 7">
            <div class="item" v-for="it in subjectData.datas" :data-id="it.productData.article_id" :data-userid="it.productData.article_userid" v-tap="[openPost,it]">
                <div class="inner">
                    <div class="photo"><img :src="it.productData.article_cover" alt=""></div>
                    <div class="textBox">
                        <div class="title aui-flex-col aui-flex-middle">
                            <div class="aui-ellipsis-2">{{ it.productData.article_content}}</div>
                        </div>
                        <div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
                            <div><div class="avatar"><img :src="it.productData.user_avatar" alt=""></div></div>
                            <div class="flex-auto name aui-ellipsis-1">{{ it.productData.user_nickname }}</div>
                            <div class="like" :class="{ 'on' : it.productData.is_like == 1 }" v-tap.stop="[togPostLike,it]">{{ it.productData.like_count }}</div>
                        </div>
                    </div>
                </div>
            </div>
            </template>

        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
//special_type  1=长图热区，2=标题图+瀑布流 3=产品瀑布流
//special_product_type 1=淘宝客，2=大礼包，3=自营，4=积分，5=产品分类，6=产品标签，7=文章

var gridDom = '#flow_html';
var grid;
var vm;
var vuedata = {
    userId: '',
    subjectId: '',
    subjectData: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata,
    methods: {
        //打开详情页面 通用
        openDetail: function(it){
            var id = it.data_product_id;
            switch (parseInt(vuedata.subjectData.special_product_type)) {
                case 1:
                    openProductDetail(id);
                    break;
                case 2:
                    openGoodsDetail(id);
                    break;
                case 3:
                    openGoodsDetail(id);
                    break;
                case 4:
                    openUbiDetail(id);
                    break;
                case 7:
                    openPostDetail(id);
                    break;

                default:
                    break;
            }
        },
        //文章点赞
		togPostLike: function(it){
			api.ajax({
				url: BASE_URL + 'App/Article/articleLike',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						article_id: it.productData.article_id,
						article_userid: it.productData.article_userid
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						it.productData.is_like = -1;
						it.productData.like_count--;
					}else{
						it.productData.is_like = 1;
						it.productData.like_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
        //打开淘宝商品详情
		openProduct: function(it){
			openProductDetail(it.data_product_id);
		},
        //打开大礼包 自营商品详情
		openGoods: function(it){
			openGoodsDetail(it.data_product_id);
		},
        //打开积分商品详情
		openUb: function(it){
			openUbiDetail(it.data_product_id);
		},
        //打开文章详情
		openPost: function(it){
			openPostDetail(it.data_product_id);
		},
	}
});

apiready = function() {
    api.parseTapmode();
    vuedata.userId = getUserId();
    vuedata.subjectId = api.pageParam.id;
    if(vuedata.subjectId){
        getData();
    }
};
function getData(){
    api.ajax({
        url: BASE_URL + 'App/Special/specialDetail',
        method: 'post',
        cache: false,
        data: {
            values: {
                id: vuedata.subjectId,
                userid: vuedata.userId
            }
        }
    },function(ret,err){
        if (ret && ret.code == 1) {
            vuedata.subjectData = ret.data;
            api.execScript({
                script:'changeData("#pageTitle","'+ vuedata.subjectData.special_title +'");'
            });
            setTimeout(function(){
                topSliderInit();
                gridInit();
            },50);
        }
        setTimeout(function(){
            $$('.pageCover').removeClass('show');
        },100);

    });
}
//顶部图片滑动
function topSliderInit(){
	if( vuedata.subjectData.special_photos && vuedata.subjectData.special_photos.length > 1 ){
		new Swiper('#mainImg',{
			speed: 600,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
			}
		})
	}
}

//调用瀑布流
function gridInit(){
    if( $$('#flow_html').length ){
        grid = new Masonry(gridDom, {
            columnWidth: '.grid-sizer',
            itemSelector: '.item',
            percentPosition: true
        });
        imagesLoaded(gridDom, function() {
            grid.layout();
        });
    }
}

</script>

</html>
